<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>大事件-后台登录页</title>
    <!-- css样式文件 -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <!-- js样式文件 -->
    <script src="js/jquery-1.12.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</head>

<body>
    <div class="main_wrap">
        <div class="header">
            <a href="#" class="logo"><img src="images/logo.png" alt=""></a>
            <div class="copyright">CopyRight © 2019 深圳百秀信息技术股份有限公司<br>All Rights Reserved</div>
        </div>

        <div class="login_form_con">
            <div class="login_title"></div>
            <!-- 表单域 改动id='f1' name = 'username' name = 'password'-->
            <form class="login_form" id="f1">
                <i class="iconfont icon-user"></i>
                <i class="iconfont icon-key"></i>
                <input type="text" class="input_txt" placeholder="邮箱/手机号" name='username'>
                <input type="password" class="input_pass" placeholder="密码" name='password'>
                <input type="button" class="input_sub" value="登 录">
            </form>
            <!-- 表单域 end -->
        </div>
    </div>

    <!-- 模态框 -->
    <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">系统提示</h4>
                </div>
                <div class="modal-body">
                    <!-- 提示内容区域 -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 模态框 end -->
    <script>
        // 登录业务思路：登录按钮  点击时 获取用户名和密码，异步提前交到 服务器对应的 登录接口
        $(function () {
            //1. 当 页面加载完成后，为登录按钮 添加 点击事件
            $('.input_sub').click(function () {
                //2. 获取 用户名和密码，并将内容中的空格都删除
                var usrName = $('.input_txt').val().replace(/ /g, '');
                var usrPwd = $('.input_pass').val().replace(/ /g, '');
                //3. 将 去掉所有空格之后的 用户名 和 密码 重新设置给 文本框
                $('.input_txt').val(usrName);
                $('.input_pass').val(usrPwd);
                //4. 简单检查 输入规则 是否满足,并用文本框 为选中状态
                if (usrName.length < 5) {
                    // alert('用户名的长度必须大于5');
                    showModel('用户名的长度必须大于5');
                    $('.input_txt').focus();
                } else if (usrPwd.length < 5) {
                    // alert('密码的长度必须大于5');
                    showModel('密码的长度必须大于5');
                    $('.input_pass').focus();
                } else {
                    // 5. ajax异步请求
                    // 5.1 手动获取文本框数据(文本框内一定设置name属性)
                    var strData = $('#f1').serialize();
                    $.ajax({
                        url: 'http://localhost:8080/admin/user/login',
                        method: 'post',
                        data: strData,
                        success: function (backData) {
                            showModel(backData.msg, function () {
                                if (backData.code == 200) {
                                    // console.log(backData);
                                    // alert('恭喜你，登录成功');
                                    window.location = './index.html';
                                } else {
                                    $('.input_txt').focus();
                                }
                            });
                        },
                    });
                }
            });
        });
        // 优化：引入模态框（提示）
        function showModel(msg, fn) {
            // 要显示的内容
            $('.modal-body').text(msg);
            // esc键 退出
            $('#myModal').modal({ keyboard: true });
            // 如果 第二个参数 fn 存在，则启动 定时器
            if (fn && fn instanceof Function) {
                setTimeout(fn, 2000);
            }
        };

    </script>

</body>

</html>